window.onload = checkURL;

function checkURL() {
    if (window.location.toString().indexOf('save')>-1 ) {
        document.getElementById('saveModal').style.display = 'block';
    }
}

function closeModal() {
    document.getElementById('saveModal').style.display = 'none';
}

function addTask(quadrant) {
    const input = document.getElementById(`input${quadrant}`);
    const list = document.getElementById(`list${quadrant}`);
    const taskText = input.value.trim();
    if (taskText === '') return;

    const task = document.createElement('li');
    const taskNumber = list.children.length + 1;
    task.innerHTML = `
        <div class="task-content">
            <span class="task-number">${taskNumber}.</span>
            <span class="task-text" contenteditable="false">${taskText}</span>
            <span class="delete-btn">✖</span>
        </div>
    `;
    
    // 只允许编辑任务文本部分
    const taskTextElement = task.querySelector('.task-text');
    taskTextElement.onclick = function(e) {
        e.stopPropagation();
        this.contentEditable = true;
        this.focus();
    };
    
    taskTextElement.onblur = function() {
        this.contentEditable = false;
        saveTasks(quadrant);
    };
    
    // 双击也可以编辑
    taskTextElement.ondblclick = function(e) {
        e.stopPropagation();
        this.contentEditable = true;
        this.focus();
    };

    const deleteBtn = task.querySelector('.delete-btn');
    deleteBtn.onclick = function(e) {
        e.stopPropagation();
        const task = this.closest('li');
        const quadrant = task.parentNode.id.replace('list', '');
        task.parentNode.removeChild(task);
        saveTasks(quadrant);
        updateTaskNumbers(quadrant);
    };
    
    list.appendChild(task);
    input.value = '';
    saveTasks(quadrant);
}

function updateTaskNumbers(quadrant) {
    const list = document.getElementById(`list${quadrant}`);
    Array.from(list.children).forEach((task, index) => {
        const taskNumber = task.querySelector('.task-number');
        if (taskNumber) {
            taskNumber.textContent = `${index + 1}.`;
        }
    });
}

document.querySelectorAll('input').forEach(input => {
    input.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            const quadrant = this.id.replace('input', '');
            addTask(quadrant);
        }
    });
});

function saveTasks(quadrant) {
    const list = document.getElementById(`list${quadrant}`);
    const tasks = [];
    for (let i = 0; i < list.children.length; i++) {
        const taskText = list.children[i].querySelector('.task-text').textContent;
        tasks.push(taskText);
    }
    localStorage.setItem(`tasks${quadrant}`, JSON.stringify(tasks));
}

function loadTasks(quadrant) {
    const tasks = JSON.parse(localStorage.getItem(`tasks${quadrant}`)) || [];
    const list = document.getElementById(`list${quadrant}`);
    tasks.forEach((taskText, index) => {
        const task = document.createElement('li');
        const taskNumber = index + 1;
        task.innerHTML = `
            <div class="task-content">
                <span class="task-number">${taskNumber}.</span>
                <span class="task-text" contenteditable="false">${taskText}</span>
                <span class="delete-btn">✖</span>
            </div>
        `;
        
        // 只允许编辑任务文本部分
        const taskTextElement = task.querySelector('.task-text');
        taskTextElement.onclick = function(e) {
            e.stopPropagation();
            this.contentEditable = true;
            this.focus();
        };
        
        taskTextElement.onblur = function() {
            this.contentEditable = false;
            saveTasks(quadrant);
        };
        
        // 双击也可以编辑
        taskTextElement.ondblclick = function(e) {
            e.stopPropagation();
            this.contentEditable = true;
            this.focus();
        };

        const deleteBtn = task.querySelector('.delete-btn');
        deleteBtn.onclick = function(e) {
            e.stopPropagation();
            const task = this.closest('li');
            const quadrant = task.parentNode.id.replace('list', '');
            task.parentNode.removeChild(task);
            saveTasks(quadrant);
            updateTaskNumbers(quadrant);
        };
        
        list.appendChild(task);
    });
}

document.addEventListener('DOMContentLoaded', () => {
    loadTasks(1);
    loadTasks(2);
    loadTasks(3);
    loadTasks(4);
});

function showTooltip(quadrant) {
    const tooltip = document.createElement('div');
    tooltip.className = 'tooltip';
    let content = '<div class="tooltip-content">';
    
    // 检查是否为移动设备
    const isMobile = window.innerWidth <= 768;
    switch (quadrant) {
        case 1:
            content += `
                <h3>第一象限 - 重要又紧急</h3>
                <p><strong>1. 定义：</strong>重要又急迫的事。</p>
                <p><strong>举例：</strong>诸如应付难缠的客户、准时完成工作、住院开刀等等。</p>
                <p><strong>说明：</strong>这是考验我们的经验、判断力的时刻，也是可以用心耕耘的园地。如果荒废了，我们很会可能变成行尸走肉。但我们也不能忘记，很多重要的事都是因为一拖再拖或事前准备不足，而变成迫在眉睫。</p>
                <p><strong>本质：</strong>该象限的本质是缺乏有效的工作计划导致本处于"重要但不紧急"第二象限的事情转变过来的，这也是传统思维状态下的管理者的通常状况，就是"忙"。</p>
            `;
            break;
        case 2:
            content += `
                <h3>第二象限 - 重要但不紧急</h3>
                <p><strong>2. 定义：</strong>重要但不紧急的事。</p>
                <p><strong>案例：</strong>主要是与生活品质有关，包括长期的规划、问题的发掘与预防、参加培训、向上级提出问题处理的建议等等事项。</p>
                <p><strong>说明：</strong>荒废这个领域将使第一象限日益扩大，使我们陷入更大的压力，在危机中疲于应付。反之，多投入一些时间在这个领域有利于提高实践能力，缩小第一象限的范围。做好事先的规划、准备与预防措施，很多急事将无从产生。这个领域的事情不会对我们造成催促力量，所以必须主动去做，这是发挥个人领导力的领域。</p>
                <p><strong>建议：</strong>这更是传统低效管理者与高效卓越管理者的重要区别标志，建议管理者要把80%的精力投入到该象限的工作，以使第一象限的"急"事无限变少，不再瞎"忙"。</p>
            `;
            break;
        case 3:
            content += `
                <h3>第三象限 - 不重要也不紧急</h3>
                <p><strong>3. 定义：</strong>不紧急也不重要的事。</p>
                <p><strong>举例：</strong>阅读令人上瘾的无聊小说、毫无内容的电视节目、办公室聊天等。</p>
                <p><strong>说明：</strong>简而言之就是浪费生命，所以根本不值得花半点时间在这个象限。但我们往往在一、三象限来回奔走，忙得焦头烂额，不得不到第四象限去疗养一番再出发。这部分范围倒不见得都是休闲活动，因为真正有创造意义的休闲活动是很有价值的。然而像阅读令人上瘾的无聊小说、毫无内容的电视节目、办公室聊天等。这样的休息不但不是为了走更长的路，反而是对身心的毁损，刚开始时也许有滋有味，到后来你就会发现其实是很空虚的。</p>
        
            `;
            break;
        case 4:
            content += `
                <h3>第四象限 - 紧急但不重要</h3>
                <p><strong>4. 定义：</strong>紧急但不重要的事。</p>
                <p><strong>举例：</strong>电话、会议、突来访客都属于这一类。表面看似第一象限，<strong style="color: red;">因为迫切的呼声会让我们产生"这件事很重要"的错觉——实际上就算重要也是对别人而言</strong>。我们花很多时间在这个里面打转，自以为是在第一象限，其实不过是在满足别人的期望与标准。</p>
           
            `;
            break;
    }

    content += '</div>';
    tooltip.innerHTML = content;
    document.body.appendChild(tooltip);

    const icon = document.querySelector(`#quadrant${quadrant} .info-icon`);
    const rect = icon.getBoundingClientRect();
    
    // 对于第二和第四象限，提示框显示在图标右侧
    if (quadrant === 2 || quadrant === 4) {
        // 初始位置设置在图标右侧
        tooltip.style.left = `${rect.right + 10}px`;
        tooltip.style.top = `${rect.top}px`;
        
        // 添加特定的边界检测逻辑
        setTimeout(() => {
            const tooltipRect = tooltip.getBoundingClientRect();
            
            // 检查右侧边界
            if (tooltipRect.right > window.innerWidth) {
                tooltip.style.left = `${window.innerWidth - tooltipRect.width - 10}px`;
            }
            
            // 检查底部边界
            if (tooltipRect.bottom > window.innerHeight) {
                tooltip.style.top = `${window.innerHeight - tooltipRect.height - 10}px`;
            }
            
            // 检查顶部边界
            if (tooltipRect.top < 0) {
                tooltip.style.top = '10px';
            }
        }, 0);
    } else {
        // 其他象限保持原来的逻辑
        tooltip.style.left = `${rect.left}px`;
        
        // 添加边界检测逻辑
        setTimeout(() => {
            const tooltipRect = tooltip.getBoundingClientRect();
            
            // 水平位置调整
            // 检查右侧边界
            if (tooltipRect.right > window.innerWidth) {
                tooltip.style.left = `${window.innerWidth - tooltipRect.width - 10}px`;
            }
            
            // 检查左侧边界
            if (tooltipRect.left < 0) {
                tooltip.style.left = '10px';
            }
            
            // 垂直位置调整 - 优先显示在下方，如果空间不足则显示在上方
            if (rect.bottom + tooltipRect.height + 10 <= window.innerHeight) {
                // 显示在图标下方
                tooltip.style.top = `${rect.bottom + 5}px`;
            } else if (rect.top - tooltipRect.height - 10 >= 0) {
                // 显示在图标上方
                tooltip.style.top = `${rect.top - tooltipRect.height - 5}px`;
            } else {
                // 如果上下空间都不足，选择空间较大的位置
                if (rect.top > window.innerHeight - rect.bottom) {
                    // 上方空间更大，显示在上方（即使空间不足）
                    tooltip.style.top = `${Math.max(10, rect.top - tooltipRect.height - 5)}px`;
                } else {
                    // 下方空间更大，显示在下方（即使空间不足）
                    tooltip.style.top = `${Math.min(window.innerHeight - tooltipRect.height - 10, rect.bottom + 5)}px`;
                }
            }
            
            // 再次检查垂直边界
            const finalRect = tooltip.getBoundingClientRect();
            if (finalRect.top < 0) {
                tooltip.style.top = '10px';
            }
            if (finalRect.bottom > window.innerHeight) {
                tooltip.style.top = `${window.innerHeight - finalRect.height - 10}px`;
            }
        }, 0);
    }

    // 点击其他地方关闭提示框
    document.addEventListener('click', function closeTooltip(event) {
        if (!tooltip.contains(event.target) && event.target !== icon) {
            tooltip.remove();
            document.removeEventListener('click', closeTooltip);
        }
    });
}

function showFullImage(src) {
    const modal = document.createElement('div');
    modal.className = 'modal';
    modal.innerHTML = `
        <div class="modal-content">
            <span class="close-modal" onclick="closeModal()">&times;</span>
            <img src="${src}" alt="放大后的示例图">
        </div>
    `;
    document.body.appendChild(modal);
}

function closeModal() {
    const modal = document.querySelector('.modal');
    if (modal) {
        modal.remove();
    }
}

function exportData() {
    const data = {};
    for (let i = 1; i <= 4; i++) {
        const tasks = JSON.parse(localStorage.getItem(`tasks${i}`)) || [];
        data[`quadrant${i}`] = tasks;
    }
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'tasks.json';
    a.click();
    URL.revokeObjectURL(url);
}

function importData(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(e) {
        const data = JSON.parse(e.target.result);
        for (let i = 1; i <= 4; i++) {
            const tasks = data[`quadrant${i}`] || [];
            localStorage.setItem(`tasks${i}`, JSON.stringify(tasks));
        }
        location.reload(); // 重新加载页面以应用导入的数据
    };
    reader.readAsText(file);
}

document.getElementById('importFile').addEventListener('change', importData);

function shareApp() {
    // 检查是否支持Web Share API
    if (navigator.share) {
        navigator.share({
            title: '四象限任务管理器',
            text: '来试试这个实用的四象限任务管理工具！',
            url: window.location.href
        })
        .then(() => console.log('分享成功'))
        .catch((error) => console.log('分享失败', error));
    } else {
        // 创建一个简单的分享弹窗
        const shareModal = document.createElement('div');
        shareModal.className = 'modal';
        shareModal.innerHTML = `
            <div class="modal-content">
                <span class="close" onclick="this.parentNode.parentNode.remove()">&times;</span>
                <h3>分享链接</h3>
                <p>复制下面的链接分享给朋友：</p>
                <input type="text" value="${window.location.href}" readonly style="width: 100%; padding: 10px; margin: 10px 0; border-radius: 5px; border: 1px solid #ddd;">
                <button onclick="navigator.clipboard.writeText('${window.location.href}').then(() => alert('链接已复制到剪贴板！'))">
                    复制链接
                </button>
            </div>
        `;
        document.body.appendChild(shareModal);
    }
}